<template>
  <section class="record">
    <my-header></my-header>
    <h1>发行记录</h1>
    <!--列表-->
    <van-pull-refresh v-model="isUpLoading" @refresh="onRefresh" v-if="!isNoData">
      <van-list
        v-model="isDownLoading"
        :finished="isFinish"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        @load="onLoadMore"
      >
        <ul class="list">
          <li v-for="item in applyList" @click="routerToDetail(item.id,item.status)">
            <div class="coin">
              <div class="icon">{{item.name | firstStr}}</div>
              <div class="title">
                <p>
                  {{item.symbol}}
                  <span>({{item.name}})</span>
                </p>
                <p>量 {{item.total | NumFormat}}</p>
              </div>
            </div>
            <div class="status">
              <p>{{item.status| status}}</p>
              <p>{{item.create_time}}</p>
            </div>
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>
    <div class="noData" v-if="isNoData">
      <img src="../assets/img/bc_noData.png" alt>
      <p>暂无记录！</p>
      <button @click="routerToHome">立即发行</button>
    </div>
  </section>
</template>
<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator'
import MyHeader from '@/components/MyHeader.vue'
import { getApplyList } from '@/api/api'
import ListPage from '@/types/page'
import { getCurrentBTYAddress } from '@33cn/wallet-api'

@Component({
  components: {
    MyHeader,
  },
  filters: {
    firstStr: (value: string) => {
      return value.substring(0, 1)
    },
  },
})
export default class Record extends Vue {
  private isUpLoading: boolean = false
  private isDownLoading: boolean = false
  private isNoData: boolean = false
  private getApplyList = getApplyList
  private param: any = new ListPage()
  private applyList: any[] = []
  private routerTostatus: any = (this as any).routerTostatus
  private error: any = null
  private isFinish: Boolean = false

  // 刷新
  public onRefresh() {
    this.applyList = []
    this.param.page = '1'
    this.isFinish = false
    this.isDownLoading = true
    this.handleGetApplyList()
  }

  // 加载更多
  public onLoadMore() {
    this.handleGetApplyList()
  }

  public handleGetApplyList(): void {
    getCurrentBTYAddress()
      .then((res: any) => {
        this.param.address = res
      })
      .then(() => {
        return this.getApplyList(this.param).then((res: any) => {
          // 判断获取数据条数若等于0
          if (res.list.length === 0) {
            return (this.isFinish = true) // 停止加载
          }
          this.param.page++
          this.applyList.push(...res.list)
        })
      })
      .catch((e) => {
        this.error = e
        this.isNoData = true
      })
      .finally(() => {
        this.isDownLoading = false
        this.isUpLoading = false
        this.applyList.length == 0
          ? (this.isNoData = true)
          : (this.isNoData = false)
      })
  }

  public routerToDetail(id: string, status: string) {
    const _Status = status
    const _Id = String(id)
    this.routerTostatus(_Status, _Id, false)
  }

  public routerToHome() {
    this.$router.push({
      path: '/home',
    })
  }
}
</script>
<style scoped lang="scss">
.record {
  height: 100vh;
  overflow: hidden;
}

h1 {
  font-size: 30px;
  padding: 0 19px;
  margin: 40px 0 10px 0;
}

.van-pull-refresh {
  height: calc(100vh - 130px);
  overflow: auto;
}

.list {
  display: flex;
  flex-direction: column;
  padding: 15px 13px 0 13px;

  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 10px;
    background-color: #ffffff;
    border-radius: 10px;
    margin-top: 10px;
  }
}

.coin {
  display: flex;
  align-items: center;
  width: calc(100% - 80px);

  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #f9bf4a;
    font-size: 20px;
    margin-right: 8px;
  }

  .title {
    display: flex;
    flex-direction: column;
    width: calc(100% - 43px);

    & > p {
      margin: 0;
      padding: 0;
    }

    & > p:nth-child(1) {
      font-size: 20px;
      color: #333649;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 5px;
    }

    & > p:nth-child(2),
    sapn {
      color: #9599a4;
    }
  }
}

.status {
  & > p:nth-child(1) {
    text-align: right;
    color: #333649;
    margin-bottom: 3px;
  }

  & > p:nth-child(2) {
    color: #9599a4;
    text-align: right;
  }
}

.noData {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: calc(100% - 100px);

  img {
    width: 236px;
    height: 216px;
  }

  p {
    margin-top: 30px;
    font-size: 16px;
  }

  button {
    width: 100px;
    height: 34px;
    background-color: #5e6377;
    font-size: 16px;
    margin-top: 25px;
    border-radius: 29px;
  }
}
</style>
